<template>
  <div>
      <el-row :gutter="20">
        <el-col class="bg-purple" style="text-align:right;" :span=2>
        n1:
        </el-col>
        <el-col class="bg-purple" :span=2>
        {{ this.$store.state.n1 }}
        </el-col>
        <el-col class="bg-purple" style="text-align:right;" :span=2>
        n2:
        </el-col>
        <el-col class="bg-purple" :span=2>
        {{ this.$store.state.n2 }}
        </el-col>
        <el-col class="bg-purple"  style="text-align:right;" :span=2>
        n1+n2:
        </el-col>
        <el-col class="bg-purple" :span=2>
        {{ this.$store.getters.sum }}
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span=6>
        <el-input-number v-model="num1" :step="1"></el-input-number>
        </el-col>
        <el-col :span=6>
        <el-button @click="addN1">commit</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span=6>
        <el-input-number v-model="num2" :step="1"></el-input-number>
        </el-col>
        <el-col :span=10>
        <el-button type="primary" @click="addN2">dispatch</el-button>
        <el-button type="primary" @click="addN2ByCallCommit">dispatchByCallCommit</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num1: 0,
      num2: 0
    }
  },
  methods: {
    addN1 () {
      this.$store.commit('addN1', { n: this.num1 })
    },
    addN2 () {
      this.$store.dispatch('addN2', { n: this.num2 })
    },
    addN2ByCallCommit () {
      this.$store.dispatch('addN2ByCallCommit', { n: this.num2 })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-row {
    margin-bottom: 20px;
}
.bg-purple {
    background: #d3dce6;
}
</style>
